<div id='CTRL'></div>
<div id='VIEW'></div>

<script description='global'>

var SCRIPT = 'fr.php';
var QUERY = SCRIPT + '?p=C|TR';
var DEBUG = {
    'Log.C'   : SCRIPT + '?p=C&debug=log',
    'Log.TR'  : SCRIPT + '?p=TR&debug=log',
    'Log.ALL' : SCRIPT + '?debug=log',
    'Record'  : SCRIPT + '?debug=rec'
};

(function(in_w) {
	var elems = in_w.document.getElementsByTagName('*');
	for (var i = 0; i < elems.length; i++) {
		var e = elems.item(i);
		if (e.hasAttribute('ID')) {
			in_w[e.getAttribute('ID')] = e;
		}
	}
})(window);

</script>
<script description='utility'>

HTMLTableElement.prototype.sort = function(in_col_pos, in_row_start) {
	var rows = this.rows;
	var order = [];
	for (var i = in_row_start; i < rows.length; i++) {
		order.push({val : rows.item(i).cells.item(in_col_pos).textContent, idx : i});
	}
	order.sort(function(e1, e2) {
		return ((e1.val > e2.val) ? -1 : 1);
	});
	var replace = document.createElement('TABLE');
	for (var i = 0; i < rows.length; i++) {
		var j = (i < in_row_start) ? i : order[(i - in_row_start)].idx;
		replace.appendChild(rows.item(j).cloneNode(true));
	}
	this.innerHTML = replace.innerHTML;
};

HTMLTableElement.prototype.applyData = function(in_data) {
	if (typeof in_data != 'object') {
		return false;
	}
	var header = {
		row : (arguments.length > 1) ? arguments[1] : false,
		col : (arguments.length > 2) ? arguments[2] : false
	};
	var once = true;
	for (var prop in in_data) {
		var row = document.createElement('TR');
		var applied = row.applyData(in_data[prop], (header.col ? prop : null));
		if (!applied) {
			return false;
		}
		if (header.row && once) {
			var rowHeader = document.createElement('TR');
			rowHeader.applyData(applied, (header.col ? '' : null));
			this.appendChild(rowHeader);
			once = false;
		}
		this.appendChild(row);
	}
	return true;

};

HTMLTableRowElement.prototype.appendCell = function(in_data) {
	var cell = document.createElement('TD');
	if (typeof in_data != 'object') {
		cell.appendChild(document.createTextNode(in_data));
	} else {
		cell.appendChild(in_data);
	}
	this.appendChild(cell);
};

HTMLTableRowElement.prototype.applyData = function(in_data, in_colHeader) {
	if (typeof in_data != 'object') {
		return null;
	}
	var rowHeader = [];
	if (in_colHeader != null) {
		this.appendCell(in_colHeader);
	}
	for (var prop in in_data) {
		this.appendCell(in_data[prop]);
		rowHeader.push(prop);
	}
	return rowHeader;
};

HTMLElement.prototype.ancestorElement = function(in_nodeName) {
	var parent = this.parentNode;
	if (!parent) {
		return null;
	}
	if (parent.nodeName == in_nodeName) {
		return parent;
	} else {
		return parent.ancestorElement(in_nodeName);
	}
};

var ajax = {
	_cur : null,
	stop : function() {
		if (this._cur) {
			this._cur.abort();
			this._cur = null;
		}
	},
	send : function(in_script, in_hook) {
		this.stop();
		var xhr = new XMLHttpRequest();
		xhr.onreadystatechange = (function(self, hook) {
			return function() {
				if (self._cur && (self._cur.readyState == 4)) {
					(hook)(self._cur.status, self._cur.responseText);
				}
			}
		})(this, in_hook);
		var avoidCache = ((in_script.indexOf('?') > 0) ? '&r=' : '?r=') + Math.random();
		xhr.open('GET', in_script + avoidCache);
		xhr.send();
		this._cur = xhr;
	}
};

</script>
<script description='application'>

var READING = document.createElement('BUTTON');
READING.textContent = 'abort';
READING.addEventListener('click', function() {
	ajax.stop();
	reading(false);
}, false);
CTRL.appendChild(READING);

(function(in_debugs) {
	for (var prop in in_debugs) {
		var button = document.createElement('BUTTON');
		button.textContent = prop;
		button.className = 'canDebug';
		button.addEventListener('click', (function(in_script) {
			return function(e) {
				ajax.send(in_script, function(in_status, in_response) {
					var TEXTAREA = document.createElement('TEXTAREA');
					VIEW.replaceChild(TEXTAREA, VIEW.firstChild);
					TEXTAREA.value = in_response;
				});
			};
		})(in_debugs[prop]), false);
		CTRL.appendChild(button);
	}
})(DEBUG);

var ITEMLIST = document.createElement('TABLE');
VIEW.appendChild(ITEMLIST);

var srcData = {
	_once : true,
	_uniqs : {},
	_isUniq : function(in_symbol) {
		if (this._uniqs[in_symbol]) {
			return false;
		} else {
			this._uniqs[in_symbol] = true;
			return true;
		}
	},
	make : function(in_data) {
		var rows = [];
		/* feeds */
		for (var i = 0; i < in_data.length; i++) {
			/* items */
			for (var j = 0; j < in_data[i].length; j++) {
				var line = in_data[i][j];
				if (!this._isUniq(line.LINK)) {
					continue;
				}
				var a = document.createElement('A');
				a.href = line.LINK;
				a.target = '_blank';
				a.appendChild(document.createTextNode(line.TITLE));
				rows.push([line.DATE, a, line.DESC]);
			}
		}
		if (this._once) {
			rows.unshift(['date', 'title', 'descripttion']);
			this._once = false;
		}
		return rows;
	}
};

function reading(in_sw)
{
	if (in_sw) {
		READING.disabled = false;
		READING.className = 'canAbort';
	} else {
		READING.disabled = true;
		READING.className = 'canNotAbort';
	}
}

var urlStore = {
	set : function(in_url, in_date) {
		if (in_date.match(/([0-9]{4})([0-9]{2})([0-9]{2}) [0-9]{6}/)) {
			var ts = +new Date((+RegExp.$1), (+RegExp.$2 - 1), (+RegExp.$3));
		} else {
			var ts = +new Date();
		}
		localStorage.setItem(in_url, ts);
	},
	exist : function(in_url) {
		return (localStorage.getItem(in_url) !== null);
	},
	deleteBeforeDays : function(in_days) {
		var ts = (+new Date()) - in_days * 24 * 3600 * 1000;
		var before = [];
		for (var i = 0; i < localStorage.length; i++) {
			var url = localStorage.key(i);
			if (+localStorage.getItem(url) < ts) {
				before.push(url);
			}
		}
		for (var i = 0; i < before.length; i++) {
			localStorage.removeItem(before[i]);
		}
	},
	deleteAll : function() {
		localStorage.clear();
	},
	test : function() {
		this.deleteAll();
		console.log(this.exist('url1') == false);
		this.set('url1', '20990325 075009');
		console.log(this.exist('url1') == true);
		this.set('url2', '10990330 075009');
		console.log(this.exist('url2') == true);
		this.deleteBeforeDays(0);
		console.log(this.exist('url1') == true);
		console.log(this.exist('url2') == false);
	}
};

urlStore.deleteBeforeDays(3);

function checkClick()
{
	var clickLink = function(in_a, in_store) {
		var tr = in_a.ancestorElement('TR');
		var cells = tr.getElementsByTagName('TD');
		tr.style.backgroundColor = '#eeeeee';
		cells[1].style.fontSize = 'xx-small';
		cells[2].style.fontSize = 'xx-small';
		if (in_store) {
			urlStore.set(in_a.href, cells[0].textContent);
		}
	};
	var elems = document.getElementsByTagName('A');
	for (var i = 0; i < elems.length; i++) {
		var a = elems[i];
		if (urlStore.exist(a.href)) {
			clickLink(a, false);
		}
		a.addEventListener('click', (function() {
			return function(in_event) {
				clickLink(in_event.target, true);
			};
		})(), false);
	}
}

function callback(in_status, in_response)
{
	reading(false);
	if (in_status != 200) {
		return;
	}
	try {
		var obj = eval('(' + in_response + ')');
	} catch (e) {
		/* json-error */
		console.log(in_response);
		return;
	}
	if (obj.data) {
		ITEMLIST.applyData(srcData.make(obj.data), false, false);
		/* order by line.DATE */
		ITEMLIST.sort(0, 1);
		checkClick();
	}
	if (obj.next.length > 0) {
		reading(true);
		ajax.send((SCRIPT + '?p=' + obj.next.join(',')), callback);
	}
}

reading(true);
ajax.send(QUERY, callback);

</script>
<style type='text/css'>

BUTTON {
	padding: 3px;
	margin-left: 3px;
	border: solid 1px gray;
	background: -moz-linear-gradient(top, white, silver);
	background: -webkit-gradient(linear, left top, left bottom, from(white), to(silver));
	border-radius: 3px;

}
BUTTON.canDebug:hover, BUTTON.canAbort:hover {
	background: -moz-linear-gradient(top, #ffff99, #999933);
	background: -webkit-gradient(linear, left top, left bottom, from(#ffff99), to(#999933));
}
@-webkit-keyframes reading {
	0% {
		border-bottom-color: gray;
		border-left-color: yellow;
	}
	25% {
		border-left-color: gray;
		border-top-color: yellow;
	}
	50% {
		border-top-color: gray;
		border-right-color: yellow;
	}
	75% {
		border-right-color: gray;
		border-bottom-color: yellow;
	}
}
@-moz-keyframes reading {
	0% {
		border-bottom-color: gray;
		border-left-color: yellow;
	}
	25% {
		border-left-color: gray;
		border-top-color: yellow;
	}
	50% {
		border-top-color: gray;
		border-right-color: yellow;
	}
	75% {
		border-right-color: gray;
		border-bottom-color: yellow;
	}
}
BUTTON.canAbort {
	-webkit-animation-name: reading;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-duration: 1s;
	-moz-animation-name: reading;
	-moz-animation-timing-function: linear;
	-moz-animation-iteration-count: infinite;
	-moz-animation-duration: 1s;
}
TEXTAREA {
	margin-top: 3px;
	width: 100%;
	height: 80%;
	border: solid 1px silver;
}
A {
	text-decoration: none;
	color: blue;
}
TABLE {
	margin-top: 3px;
	border-collapse: collapse;
}
TD {
	border-collapse: collapse;
	border: solid 1px silver;
	padding: 3px;
	max-width: 400px;
}
TR:first-child {
	color: white;
	background-color: gray;
}

</style>
